<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>{% block title %}小说列表 - 畅读小说网{% endblock %}</title>
</head>
<body>
    <!-- 导航条 -->
    <header class="site-header bg-white shadow-md py-3">
        <div class="header-content container mx-auto flex justify-between items-center px-4">
            <div class="logo">
                <h1 class="text-2xl font-bold text-blue-500">畅读小说网</h1>
            </div>
            <nav class="main-nav">
                <ul class="flex space-x-6">
                    <li><a href="{% url 'frontend_home' %}" class="text-gray-700 hover:text-blue-500 font-bold">首页</a></li>
                    <li><a href="{% url 'novel_list' %}" class="text-gray-700 hover:text-blue-500 font-bold">分类</a></li>
                </ul>
            </nav>
            <div class="user-nav flex items-center space-x-4">
                {% if user.is_authenticated %}
                    <span class="welcome-msg text-gray-700">欢迎，{{ user.username }}</span>
                    {% if admin_link %}
                        <a href="{% url 'admin:index' %}" class="admin-link bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-600">管理后台</a>
                    {% endif %}
                    {% if user.role == 'author' %}
                        <a href="#" class="author-link text-gray-700 hover:text-blue-500">作家中心</a>
                    {% endif %}
                    <a href="{% url 'user_profile' %}" class="user-center text-gray-700 hover:text-blue-500">个人中心</a>
                    <a href="{% url 'bookshelf' %}" class="bookshelf text-gray-700 hover:text-blue-500">我的书架</a>
                    <a href="{% url 'logout' %}" class="logout-btn bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600">退出</a>
                {% else %}
                    <a href="{% url 'login' %}" class="login-btn bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">登录</a>
                    <a href="{% url 'register' %}" class="register-btn bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600">注册</a>
                {% endif %}
            </div>
        </div>
    </header>

    {% block content %}
    <div class="novel-list-container mx-auto p-4 max-w-7xl">
        <div class="novel-list-header mb-8">
            <h1 class="text-3xl font-bold text-gray-800">小说列表</h1>
        </div>
        <div class="novel-list-content flex flex-col md:flex-row">
            <div class="filter-sidebar w-full md:w-1/4 mb-8 md:mb-0 pr-4">
                <div class="filter-section mb-8">
                    <div class="search-box mb-4">
                        <form action="{% url 'novel_search' %}" method="get" class="flex">
                            <input type="text" name="q" placeholder="搜索小说名或作者..." value="{{ query|default:'' }}" class="flex-1 border border-gray-300 rounded-l px-4 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600 focus:outline-none focus:ring-blue-500">搜索</button>
                        </form>
                    </div>
                    <h3 class="text-lg font-bold text-gray-700 mb-2">分类筛选</h3>
                    <ul class="category-filter space-y-2">
                        <li {% if not category_id %}class="bg-blue-100 text-blue-700"{% endif %}>
                            <a href="{% url 'novel_list' %}" class="block p-2 rounded hover:bg-blue-100 hover:text-blue-700">全部</a>
                        </li>
                        {% for category in categories %}
                        <li {% if category_id == category.id|stringformat:"i" %}class="bg-blue-100 text-blue-700"{% endif %}>
                            <a href="{% url 'novel_list' %}?category={{ category.id }}" class="block p-2 rounded hover:bg-blue-100 hover:text-blue-700">{{ category.name }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="filter-section">
                    <h3 class="text-lg font-bold text-gray-700 mb-2">排序方式</h3>
                    <ul class="sort-filter space-y-2">
                        <li {% if sort_by == 'newest' or not sort_by %}class="bg-blue-100 text-blue-700"{% endif %}>
                            <a href="{% url 'novel_list' %}?{% if category_id %}category={{ category_id }}&{% endif %}sort=newest" class="block p-2 rounded hover:bg-blue-100 hover:text-blue-700">最新发布</a>
                        </li>
                        <li {% if sort_by == 'popular' %}class="bg-blue-100 text-blue-700"{% endif %}>
                            <a href="{% url 'novel_list' %}?{% if category_id %}category={{ category_id }}&{% endif %}sort=popular" class="block p-2 rounded hover:bg-blue-100 hover:text-blue-700">人气最高</a>
                        </li>
                        <li {% if sort_by == 'updated' %}class="bg-blue-100 text-blue-700"{% endif %}>
                            <a href="{% url 'novel_list' %}?{% if category_id %}category={{ category_id }}&{% endif %}sort=updated" class="block p-2 rounded hover:bg-blue-100 hover:text-blue-700">最近更新</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="novel-list-main w-full md:w-3/4">
                <div class="list-header mb-4">
                    <div class="current-filter text-gray-700">
                        当前分类：<span class="font-bold">{{ current_category|default:"全部" }}</span>
                    </div>
                </div>

                {% if novels %}
                <div class="novel-grid grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    {% for novel in novels %}
                    <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                        <div class="novel-cover relative h-48 overflow-hidden">
                            <a href="{% url 'novel_detail' novel.id %}">
                                {% if novel.cover %}
                                    <img src="{{ novel.cover.url }}" alt="{{ novel.title }}" class="w-full h-full object-cover">
                                {% else %}
                                    <div class="no-cover absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-500">暂无封面</div>
                                {% endif %}
                            </a>
                        </div>
                        <div class="novel-info p-4">
                            <h3 class="novel-title text-lg font-bold mb-2">
                                <a href="{% url 'novel_detail' novel.id %}" class="text-gray-800 hover:text-blue-500">{{ novel.title }}</a>
                            </h3>
                            <p class="novel-author text-sm text-gray-600 mb-1">作者：{{ novel.author.username }}</p>
                            <p class="novel-category text-sm text-gray-600 mb-2">分类：{{ novel.category.name }}</p>
                            <p class="novel-desc text-sm text-gray-600 mb-4">{{ novel.description|truncatechars:80 }}</p>
                            <div class="novel-meta flex space-x-4 mb-4">
                                <span class="meta-item text-sm text-gray-600"><i class="fa-solid fa-book-open"></i>{{ novel.chapters.count }}章</span>
                                <span class="meta-item text-sm text-gray-600"><i class="fa-solid fa-eye"></i>{{ novel.views|default:0 }}阅读</span>
                                <span class="meta-item text-sm text-gray-600"><i class="fa-solid fa-bookmark"></i>{{ novel.in_bookshelves.count }}收藏</span>
                            </div>
                            <div class="novel-actions flex space-x-2">
                                <a href="{% url 'novel_detail' novel.id %}" class="btn-detail bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-blue-500">查看详情</a>
                                <a href="{% url 'read_novel' novel.id %}" class="btn-read bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-green-500">开始阅读</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if is_paginated %}
                <div class="pagination flex justify-between items-center mt-8">
                    <span class="page-info text-gray-700">第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页</span>
                    <div class="page-links flex space-x-2">
                        {% if page_obj.has_previous %}
                        <a href="?{% if category_id %}category={{ category_id }}&{% endif %}{% if sort_by %}sort={{ sort_by }}&{% endif %}page=1" class="page-link bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 focus:outline-none focus:ring-gray-400">&laquo; 首页</a>
                        <a href="?{% if category_id %}category={{ category_id }}&{% endif %}{% if sort_by %}sort={{ sort_by }}&{% endif %}page={{ page_obj.previous_page_number }}" class="page-link bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 focus:outline-none focus:ring-gray-400">&lt; 上一页</a>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <span class="page-link bg-blue-500 text-white px-3 py-1 rounded">{{ num }}</span>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?{% if category_id %}category={{ category_id }}&{% endif %}{% if sort_by %}sort={{ sort_by }}&{% endif %}page={{ num }}" class="page-link bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 focus:outline-none focus:ring-gray-400">{{ num }}</a>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                        <a href="?{% if category_id %}category={{ category_id }}&{% endif %}{% if sort_by %}sort={{ sort_by }}&{% endif %}page={{ page_obj.next_page_number }}" class="page-link bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 focus:outline-none focus:ring-gray-400">下一页 &gt;</a>
                        <a href="?{% if category_id %}category={{ category_id }}&{% endif %}{% if sort_by %}sort={{ sort_by }}&{% endif %}page={{ page_obj.paginator.num_pages }}" class="page-link bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 focus:outline-none focus:ring-gray-400">末页 &raquo;</a>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {% else %}
                <div class="empty-list flex flex-col items-center justify-center h-64 bg-gray-100 rounded-lg">
                    <div class="empty-icon text-5xl text-gray-500 mb-4">📖</div>
                    <h3 class="text-lg font-bold text-gray-700 mb-2">暂无小说</h3>
                    <p class="text-gray-600">当前分类下暂时没有小说，请尝试其他分类或稍后再来。</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endblock %}

    <!-- 脚注 -->
    <footer class="site-footer bg-gray-800 text-white py-8">
        <div class="footer-content container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
            <div class="footer-logo">
                <h2 class="text-2xl font-bold">畅读小说网</h2>
                <p class="text-gray-400">免费小说阅读平台</p>
            </div>
            <div class="footer-links">
                <h3 class="text-lg font-bold mb-4">快速链接</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white">关于我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">联系我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">用户协议</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <h3 class="text-lg font-bold mb-4">联系我们</h3>
                <p class="text-gray-400">邮箱: contact@novel.example.com</p>
            </div>
        </div>
        <div class="copyright text-center text-gray-400 mt-8 pt-8 border-t border-gray-700">
            <p>&copy; 2025 畅读小说网. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>